<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS随机排序</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <style>
        #za{
            background-color: transparent !important;
            margin-top: -0.5%;
            border: 1px solid #626262;
        }
    </style>
</head>
<body>
          <div class="container" style="background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));">
              <div  class="text-center">
                  <h5>输入格式：每项之间用英文逗号","隔开，最后一个后面不加逗号</h5>
                  <textarea name="a" id="text"  style="width:200px;height:80px;"></textarea>
              </div>
              <!--<input type="text" name="txt1" onKeyup="sendData(this);" />-->

              <p  class="text-center">
                  <input type="submit"  value="随机排序"  onclick="sort()"/>
              </p>
              <div  class="text-center">
                  <h5>排序</h5>
                  <div style="width:200px;height:80px;border: 1px solid #b8c4cb;margin-left: 470px">
                      <ul id="ul"></ul>
                  </div>

              </div>

          </div>

                  <!--&lt;!&ndash;<div>&ndash;&gt;-->
                      <!--<textarea rows="10" cols="30" id="text" ></textarea>-->
                  <!--</div>-->
                  <!--<div>-->
                      <!--<input type="submit" onclick="sort()" value="开始抽取" />-->
                  <!--</div>-->
                  <!--<div style="background-color: cadetblue">-->
                      <!--<ul id="ul">-->

                      <!--</ul>-->
                  <!--</div>-->
                 <!--<input class="span12" name="dd" id="dd" type="text"  value="" style="font-size: 18px;margin-top: 4%;">-->
                 <!--<button class="btn"  onclick="fun()" id="za">-->
                     <!--Start-->
                 <!--</button>-->
                 <!--<p class="pp"></p>-->


</body>
<script>
//    function fun() {
//        var string = document.getElementById("dd").value;//原始数据
//        var array = string.split("，"); //转化为数组
//        $(".pp").empty();
//        var l=array.length;
//        for(i=0;i<l;i++){
//            n=Math.floor(Math.random() * (array.length));
//            $(".pp").append(array[n]);//随机选取
//            array.splice(n,1)
//        }
//    }

    var sort=function(){
        var Text=document.getElementById("text").value;
        var strArray=Array();
        strArray=Text.split(' ',1000);
        var T=strArray.length;
        $("#ul").empty();
        for(i=0;i<T;i++){
            var n=0;
            n=Math.floor(Math.random()*(strArray.length));
            $("#ul").append("<li>"+"第"+(i+1)+"名："+strArray[n]+"</li>");
            strArray.splice(n,1);
        }
    }


</script>
</html>